<template>
  <el-dialog
    class="public-dialog"
    title="确认及备注"
    width="560"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <p class="text-[14px] text-[#0a1431] leading-[20px] mb-[16px]">
      <span>选中数据：</span>
      <span class="text-[18px] text-[#3366F1]">{{ rows.length }}</span>
    </p>
    <div>
      <VForm
        ref="form"
        :fieldList="fieldList"
        :options="formOptions"
        :rules="rules"
      />
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSave">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from 'element-plus'
import VForm from '@/components/Form/index.vue'

import { sureBills, sureOther } from '../../api'

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  rows: { type: [Array, Object], default: () => [] },
  type: { type: String, default: '' },
})

const emit = defineEmits(['update:modelValue', 'refresh'])

const form = ref()
const loading = ref(false)
const fieldList = [
  {
    label: '备注',
    field: 'remark',
    type: 'textarea',
    style: { width: '100%' },
    autosize: { minRows: 2, maxRows: 6 },
    full: true,
  },
]
const rules = {}

const handleSave = async () => {
  try {
    loading.value = true
    const { rows, type } = props
    const formValues = await form.value.submit()
    console.warn(formValues)
    const id = rows.map(n => n.id)
    const _api = {
      order: sureBills,
      other: sureOther,
    }
    const { code, message } = await _api[type]({ id, ...formValues })
    if (code !== 200) {
      ElMessage.warning(message)
      return
    }
    ElMessage.success('操作成功')
    handleClose(true)
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

const handleClose = refresh => {
  emit('update:modelValue', false)
  form.value.resetForm()
  if (close) emit('close')
  if (refresh) emit('refresh')
}

const formOptions = {
  labelPosition: 'top',
}
</script>
